<template>
    <add-contact-dialog :visible="addDialogVisible" :is-edit="isEditCustomer" :enableCustomer="true" :idSupport="formData.idCustomer" :info="customerInfo" @callClosed="handleAddDialogClosed"
                        @callSaveSuccess="handleAddSuccess"/>
    <el-dialog
            title="客户资料"
            v-model="dialogVisible"
            width="50%"
            align-center
            :before-close="handleClosed"
    >
        <el-form :model="formData" label-width="120px" class="user-profile-form">
            <el-row>
                <el-col :span="10">
                    <el-form-item>
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadAPI.uploadImage()"
                                name="file"
                                :auto-upload="true"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="formData.logo" style="height: 180px;width: 180px;object-fit: cover"
                                 :src="formData.logo" class="avatar" alt="用户头像">
                            <div v-else>
                                <bar-icon :icon="'add'" :width="25" :height="25" style="margin: 78px"
                                          :color="'#e9e9eb'"/>
                            </div>
                            <!--                                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <el-form-item label="客户名称">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="客户简称">
                        <el-input v-model="formData.nameShort"></el-input>
                    </el-form-item>
                    <el-form-item label="客户英文名称">
                        <el-input v-model="formData.nameEn"></el-input>
                    </el-form-item>
                    <el-form-item label="客户类别">
                        <el-select v-model="formData.typeCustomer" style="width:100px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <el-form :model="formData" label-width="120px" class="user-profile-form">
            <el-form-item label="电话">
                <el-input v-model="formData.phone">
                    <template #prepend>
                        <div>+86</div>
                    </template>
                </el-input>
            </el-form-item>
            <el-row>
                <el-form-item label="电子邮箱">
                    <el-input v-model="formData.email">
                        <template #prepend>
                            <div>Email</div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="客户官网">
                    <el-input v-model="formData.url">
                        <template #prepend>
                            <div>http://</div>
                        </template>
                    </el-input>
                </el-form-item>
            </el-row>
            <el-form-item label="客户地址">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="formData" label-width="120px" class="user-profile-form">
            <el-form-item label="社会信用代码">
                <el-input v-model="formData.codeSocialCredit"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="formData.comments"></el-input>
            </el-form-item>
            <el-form-item label="客户简介">
                <el-input type="textarea" v-model="formData.profile"></el-input>
            </el-form-item>

        </el-form>
        <template v-if="formData.idCustomer !== undefined">
            <el-divider/>
            <el-row justify="space-between">
                <el-col :span="12">
                    <el-form-item label="联系人" prop="name">
                        <el-input v-model="queryData.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-button-group>
                        <el-button type="primary" @click="handleQuery">搜索</el-button>
                        <el-button type="primary" @click="handleAddContact" plain>添加</el-button>
                        <el-button type="danger" :disabled="seleted.length === 0" @click="handleDelete" plain>删除
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <el-table :data="contact" height="250" @selectionChange="handleSelectChanged">
                <el-table-column type="selection"/>
                <el-table-column prop="name" label="称呼"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="comments" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleSave" type="primary">保存</el-button>
            <el-button @click="handleClosed">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import customerAPI from "@/util/request-md/customer/customer.js";
import uploadAPI from "@/util/request-md/file/upload.js";
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import contactAPI from "@/util/request-md/contact/contact.js";
import AddContactDialog from "@/components/widget/dialog/AddContactDialog.vue";

export default {
    name: "CustomerInfoDialog",
    components: {AddContactDialog, BarIcon},
    computed: {
        uploadAPI() {
            return uploadAPI
        }
    },
    emits: ['callClosed', 'callSaveSuccess'],
    props: ['data', 'visible', 'isEdit', 'currentCustomer'],
    watch: {
        'visible'(val) {
            this.dialogVisible = val;
            if (this.isEdit) {
                this.formData = {
                    idCustomer: '',
                    name: '',
                    nameShort: '',
                    nameEn: '',
                    typeCustomer: '',
                    status: 1,
                    phone: '',
                    email: '',
                    url: '',
                    address: '',
                    codeSocialCredit: '',
                    comments: '',
                    logo: '',
                    profile: '',
                    createtime: '',
                    updatetime: ''
                }
            }
            this.formData = this.data;
            this.loadContacts();
        },
        'currentCustomer'(val) {
            //如果val有值，那么就更新form的值
            if (val.idCustomer !== undefined) {
                this.formData = val;
                this.loadContacts();
            } else {
                this.fromData = {};
            }

        }
    },
    data() {
        return {
            dialogVisible: false,
            formData: {
                idCustomer: '',
                name: '',
                nameShort: '',
                nameEn: '',
                typeCustomer: '',
                status: 1,
                phone: '',
                email: '',
                url: '',
                address: '',
                codeSocialCredit: '',
                comments: '',
                logo: '',
                profile: '',
                createtime: '',
                updatetime: ''
            },
            seleted: [],
            isEditCustomer:false,
            contact: [
                {
                    name: '张三',
                    phone: '1001',
                    email: '@as1f5.com',
                    comments: '这是客户的备注'
                }
            ],
            options: [
                {
                    value: '0',
                    label: '普通客户'
                },
                {
                    value: '1',
                    label: '重点客户'
                },
                {
                    value: '2',
                    label: 'VIP'
                },
                {
                    value: '3',
                    label: 'SVIP'
                },
            ],
            customerInfo:{},
            queryData: {
                name: '',
            },
            addDialogVisible: false,

        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.formData.logo = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return (isJPG || isPNG) && isLt2M;
        },
        handleSave() {
            //判断data是否为空
            if (this.isEdit) {
                customerAPI.addCustomer(this.formData, (res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.$emit('callSaveSuccess');
                    }
                })
            } else {
                customerAPI.updateCustomer(this.formData, (res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$emit('callSaveSuccess');
                    }
                })
            }
        },
        handleClosed() {
            this.$emit('callClosed');
        },
        //查询联系人
        handleQuery() {
            contactAPI.getCustContact({idCustomer: this.formData.idCustomer, name: this.queryData.name}, (res) => {
                if (res.code === 200) {
                    this.contact = res.data;
                    this.$message.success("查询成功");
                }
            })
        },
        //添加联系人
        handleAddContact() {
            this.addDialogVisible = true;
        },
        //删除事件
        handleDelete() {
            var idContact = [];
            for (let i = 0; i < this.seleted.length; i++) {
                idContact.push(this.seleted[i].idContact);
            }
            console.log(idContact, ">>>>>ids")
            contactAPI.deleteCustContact({idCustomer: this.formData.idCustomer, idContact: idContact}, (res) => {
                if (res.code === 200) {
                    this.$message.success("删除成功");
                    this.loadContacts();
                } else {
                    this.$message.error("删除失败:" + res.code);
                }
            })
        },
        handleSelectChanged(data) {
            this.seleted = data;
        },
        loadContacts() {
            console.log(this.formData)
            contactAPI.getCustContact({idCustomer: this.formData.idCustomer, name: this.queryData.name}, (res) => {
                if (res.code === 200) {
                    this.contact = res.data;
                    console.log(this.contact)
                }
            })
        },
        handleAddDialogClosed(){
            this.addDialogVisible = false;
        },
        handleAddSuccess(){
            this.addDialogVisible = false;
            this.loadContacts();
        },
        //修改联系人
        handleEdit(data){
            this.customerInfo = data;
            this.isEditCustomer = true;
            this.addDialogVisible = true;

        }

    },
    mounted() {
        // this.loadContacts();
    }
}
</script>

<style scoped>
.avatar-uploader {
    display: inline-block;
    text-align: center;
    width: 180px;
    height: 180px;
    line-height: 180px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
}
</style>